<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户权限</el-breadcrumb-item>
        <el-breadcrumb-item>用户详情</el-breadcrumb-item>
        </el-breadcrumb>
<!--卡片试图区域-->
<el-card >
    <!--搜索与添加区-->
  <el-row :gutter="20">
      <el-col :span="8">
       <el-input placeholder="请输入内容"  v-model="query" clearable @clear="getUserList">
        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
        </el-input>
        </el-col>
      <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
      </el-col>
  </el-row>

  <!--用户列表区-->
  <el-table :data="userlist" border stripe>
      <el-table-column type="index"> </el-table-column>
      <el-table-column label="用户名" prop="username"> </el-table-column>
      <el-table-column label="邮箱" prop="email" > </el-table-column>
      <el-table-column label="角色" prop="status"> </el-table-column>
      <el-table-column label="操作"  width="180px"> 
          <template slot-scope="scope">
              <!-- <用户修改区> -->
               <el-tooltip  effect="dark" content="修改" placement="top" :enterable="false">
               <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
               </el-tooltip>
              <!--删除-->
               <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete"  size="mini" @click="removeUserById(scope.row.username)"></el-button>
               </el-tooltip>
              <!--更改权限-->
               <el-tooltip class="item" effect="dark" content="更改权限" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting"  size="mini"></el-button>
               </el-tooltip>
          </template>
      </el-table-column>
  </el-table>

  <!-- <分页区域> -->
  <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange"
   :current-page="pagenum" :page-sizes="[1,2,5,10]" :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</el-card>
<!-- <添加用户的对话框> -->
<el-dialog title="用户添加" :visible.sync="addDialogVisible" width="50%"  @close="addDialogClosed">
  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" >
  <el-form-item label="用户名" prop="username">
    <el-input v-model="addForm.username"></el-input>
  </el-form-item>

   <el-form-item label="密码" prop="password">
    <el-input v-model="addForm.password"></el-input>
  </el-form-item>
  
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="addForm.email"></el-input>
  </el-form-item>


  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible= false">取 消</el-button>
    <el-button type="primary"  @click="addUser"> 确 定</el-button>
  </span>
</el-dialog>

<!-- <修改用户的对话框> -->
<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
  <!-- <修改用户的信息> -->
  <el-form ref="editFormRef" :model="editForm" label-width="80px" :rules="editFormRules">
  <el-form-item label="用户名">
    <el-input v-model="editForm.username" disabled></el-input>
  </el-form-item>

<el-form-item label="密码" prop="password">
    <el-input v-model="editForm.password" ></el-input>
  </el-form-item>

  <el-form-item label="邮箱" prop="email">
    <el-input v-model="editForm.email" ></el-input>
  </el-form-item>

  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible= false">取 消</el-button>
    <el-button type="primary" @click="editUserInfo">确 定</el-button>
  </span>
</el-dialog>


    </div>
</template>

<script>
export default {
    data(){
      var checkEmail=(rule,value,cb)=>{
          const regEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

          if(regEmail.test(value)){
              return cb()
          }

          cb(new Error('请输入合法的邮箱'))
      }

       return{
           query:'',
           userlist:[],
           total:0,
           pagenum:0,
           pagesize:0,
           //添加用户的对话框
           addDialogVisible:false,
           //添加用户的表单数据
           addForm: {
               username:' ',
               password:' ',
               email:' '

           },
             editForm: {
               username:' ',
               password:' ',
               email:' '

           },
           //添加表单的验证规则对象
           addFormRules:{
               username:[
                   {required:true,message:'请输入用户名',trigger:'blur'},
                   {min:3,max:10,message:'用户名长度在3-10之间',trigger:'blur'}
                   ],
                   password:[
                   {required:true,message:'请输入密码',trigger:'blur'},
                   {min:6,max:15,message:'密码长度在6-15之间',trigger:'blur'}
                   ],
                   email:[
                   {required:true,message:'请输入邮箱',trigger:'blur'},{validator:checkEmail,trigger:'blur'}
                   ]
           },
           editFormRules:{
              
                   password:[
                   {required:true,message:'请输入密码',trigger:'blur'},
                   {min:6,max:15,message:'密码长度在6-15之间',trigger:'blur'}
                   ],
                   email:[
                   {required:true,message:'请输入邮箱',trigger:'blur'},{validator:checkEmail,trigger:'blur'}
                   ]
           },
           editDialogVisible:false
       }
        },
    created(){
        this.getUserList()
    },
    methods:{
        async getUserList(){
            const result =await this.$http.get('listuser');
            console.log(result)
            if(result.status!==200) return this.$message.console.error("获取数据失败！");

            this.userlist=result.data.userList
            this.total=result.data.userList.length
            
            // this.$message.success("获取数据成功");
        },
        //监听pagesize
        handleSizeChange(newSize){
            this.pagesize=newSize
            this.getUserList()
            console.log(newSize)
        },
        //监听页码值改变
        handleCurrentChange(newPage){
            this.pagenum=newPage
            this.getUserList()
            console.log(newPage)
        },
        //监听添加用户对话框
        addDialogClosed(){
            this.$refs.addFormRef.resetFields();
        },
        //添加新用户
        addUser(){
             this.$refs.addFormRef.validate(async valid=>{
                //  console.log(valid)
                if(!valid) return
                //通过可以发送添加的请求
                const result=await this.$http.get('adduser',{params:{
                    username:this.addForm.username,
                    password: this.addForm.password,
                    email:this.addForm.email
                }}
                )
                console.log(result);
                if(result.data.success!=true) return this.$message.console.error("添加失败！");
                this.$message.success("添加成功");

                this.addDialogVisible=false;
                //重新获取列表
                this.getUserList()
             })
        },
        showEditDialog(id){
            console.log(id)
            this.editDialogVisible=true
            this.editForm.username=id.username
            this.editForm.password=id.password
            this.editForm.email=id.email
        },
        //监听修改用户对话框的关闭事件
        editDialogClosed(){
            this.$refs.editFormRef.resetFields()

        },
        editUserInfo(){
            this.$refs.editFormRef.validate(async valid=>{
                // console.log(valid)
                if(!valid) return
                //发起修改用户信息的请求
                const result=await this.$http.get('modifyuser',{params:{
                    username:this.editForm.username,
                    password:this.editForm.password,
                    email:this.editForm.email
                }})
                console.log(result)
                if(result.data.success!=true) {return this.$message.error("更新用户信息失败！");}
                //关闭对话框
                this.editDialogVisible=false
                //刷新列表
                this.getUserList()
                //提示更新成功
                this.$message.success('更新用户成功')
            })
        },
        async removeUserById(id){
            // console.log(id)
            //先弹框询问
            const confirmResult=await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=> err)
        //cnonfirm 则是确定要删除
        //如果取消了删除 则返回cancel
        if(confirmResult!='confirm')
        {
            return this.$message.info('已经取消删除')
        }
        // console.log(confirmResult)
        const {data:res}=await this.$http.get('removeuser',{params:{
                    username:id                   
                }
        })
        if(res.success!='true'){
            this.$message.error('删除用户失败')
        }
         //关闭对话框
        this.editDialogVisible=false
                //刷新列表
        this.getUserList()
                //提示更新成功
        this.$message.success('删除用户成功')

    }
    }
}
</script>

<style lang="less" scoped>
.el-pagination{
    margin-top: 15px;
}

</style>